<template>
	<div id="index">
		<mainHeader></mainHeader>
		<div class="main">
			<!-- banner -->
			<div class="banner">
				<el-row class="bcontant">
					<el-col :span="16">
						<Search></Search>
					</el-col>
					<el-col :span="8">
						<Account></Account>
					</el-col>
				</el-row>
				
			</div>
			<!-- mine -->
			<div class="nav_list">
				<el-row>
					<el-col :span="6">
						<i class="iconfont">&#xe60c;</i><i class="iconfont icon_hover">&#xe61e;</i>
						<h3>平台精选推荐</h3>Recommended platform
					</el-col>
					<el-col :span="6">
						<i class="iconfont">&#xe60d;</i><i class="iconfont icon_hover">&#xe61f;</i>
						<h3>预售公告</h3>Pre sale announcement
					</el-col>
					<el-col :span="6">
						<i class="iconfont">&#xe60e;</i><i class="iconfont icon_hover">&#xe621;</i>
						<h3>我的收藏</h3>My collection
					</el-col>
					<el-col :span="6">
						<i class="iconfont">&#xe60b;</i><i class="iconfont icon_hover">&#xe620;</i>
						<h3>我的提醒</h3>My reminder
					</el-col>
				</el-row>
			</div>
			<!-- 最新上线 -->
			<div class="product">
				<div class="recommend">
					<recomdList></recomdList>
				</div>
				<div class="assetlist">
					<h2>最新上线<span>Latest on-line</span><a href="">查看更多<font>></font></a></h2>
					<assetsList assets-type="dateNew"></assetsList>
				</div>
			</div>
			<!-- 平台精选 -->
			<div class="product">
				<div class="recommend">
					<recomdList></recomdList>
				</div>
				<div class="assetlist">
					<h2>平台精选<span>Platform selection</span><a href="">查看更多<font>></font></a></h2>
					<assetsList assets-type="heatNew"></assetsList>
				</div>
			</div>
			<!-- 行业新闻 -->
			<div class="news">
				<div class="news_wrap">
					<h2 class="news_title">行业新闻<span>Industry news</span></h2>
					<newsList></newsList>
				</div>
			</div>
			<!-- 合作伙伴 -->
			<div class="partner">
				<h2>合作伙伴<span>Partner</span></h2>
				<el-row>
					<el-col :span="6">
						<img src="../../public/images/bank1.png" >
						<h3>中国银行</h3>Hours of Work
					</el-col>
					<el-col :span="6">
						<img src="../../public/images/bank1.png" >
						<h3>中国银行</h3>Hours of Work
					</el-col>
					<el-col :span="6">
						<img src="../../public/images/bank1.png" >
						<h3>中国银行</h3>Hours of Work
					</el-col>
					<el-col :span="6">
						<img src="../../public/images/bank1.png" >
						<h3>中国银行</h3>Hours of Work
					</el-col>
				</el-row>
			</div>
		</div>

    	<mainFooter></mainFooter>
	</div>
</template>

<script>
    import * as IFD from '../main/main';
    import * as assetList from '../assets/asset/main';
    import * as lists from './index/main';
    
    export default {
        name:'index',
        components:{
            mainHeader:IFD.header,
            mainFooter:IFD.footer,
            assetsList:assetList.asset,
            recomdList:lists.list,
            newsList:lists.news,
            Search: lists.search,
            Account: lists.account,
        },
        
    }
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../public/css/variable.less';
	.banner{
		background: url(../../public/images/banner.jpg) no-repeat 50% 50%;
	    background-size: cover;
	    height: 920px;
	    padding-top: 91px;
	    box-sizing: border-box;
	    .bcontant{
	    	margin: 160px auto 0;
		    width: 1200px;
		    padding: 0 45px;
		    box-sizing: border-box;
		    .el-col-16{ padding-right: 10px; }
		    .el-col-8{ padding: 0 0 0 20px; }
	    }
	}
	.nav_list{
		background: #fafafa;
    	padding: 35px;
    	text-align: center;
    	line-height: 26px;
    	.el-row{
    		width: 1200px;
    		margin: 0 auto;
    	}
    	i{
    		.fonts(70px);
		    line-height: 95px;
		    color: #b8b8b8;
    	}
    	.icon_hover{
    		display: none;
    	}
    	h3{
    		.fonts(20px);
    		color: #5d5f63;
    	}
    	.el-col:hover{
    		.iconfont{ display: none; }
    		.icon_hover{ display: block; }
    		i,h3{ color: @cgolden; }
    		color: @cgolden;
    	}
	}

	.product{
		.cf();
		width: 1200px;
	    margin: 50px auto 120px;
		.recommend{
			float: right;
		}
		.assetlist{
			width: 890px;
			h2{
				color: #6c6e71;
		    	.fonts(18px);
		    	padding: 0 1.2%;
		    	margin-bottom: 15px;
		    	span{
		    		display: inline-block;
				    font-size: 14px;
				    color: #cac9c9;
				    padding-left: 15px;
				    vertical-align: middle;
		    	}
		    	a{
		    		float: right;
				    color: #aeb1b3;
				    .fonts(12px);
				    margin-top: 6px;
				    font{
						font-family: '宋体';
					    .fonts(13px);
					    padding-left: 3px;			    	
				    }
		    	}
			}
		}
	}

	.news{
		background: url(../../public/images/news_b.jpg) no-repeat center;
	    height: 520px;
	    width: 100%;
	    .news_wrap{
	    	width: 1200px;
	    	margin: 0 auto;
	    }
	    .news_title{
	        color: @cw;
	        padding-top: 100px;
	        span{ color: @cw; }
	    }
	}
	.partner{
		background: #f9f9f9;
		h2{
			color: #6c6e71;
	    	.fonts(16px);
	    	margin-bottom: 15px;
	    	width:1200px;
	    	margin: 0 auto;
	    	padding: 60px 0 0;
	    	span{
	    		display: inline-block;
			    font-size: 14px;
			    color: #cac9c9;
			    padding-left: 15px;
			    vertical-align: middle;
	    	}
		}
		.el-row{
			width: 1200px;
			margin: 0 auto;
			padding: 45px 0 75px;
    		box-sizing: border-box;
    		color: #8f9397;
    		text-align: center;
    		h3{
    			color: #5d5f63;
			    margin-top: 30px;
			    .fonts(18px);
			    padding-bottom: 10px;
    		}
		}
	}
	
</style>